<div class="mb-2 mt-2">
    <div>
        <label class="pb-2 pt-2 mb-0 font-weight-bold">
        <input type="checkbox" id="route_{:$route->getKey()}" name="route_ids[]" value="{:$route->getKey()}" class="{:$route->getData("parent_css")} route_{:$route->getKey()}" {:$route->getData("checked")} />
        <span class="pl-1">{:$route->getTitle()}</span>
        </label>
    </div>
</div>
<script type="text/javascript">
    $("#route_{:$route->getKey()}").click(function() {
        var checked = $(this).prop('checked');
        var cls = $(this).prop('class').split(/\s+/);
        if (cls.length > 0 && checked) {
            var cl = '';
            cls.forEach((v, k) => {
                cl += v;
                $('input[class="' + cl +'"]').prop('checked', checked);
                cl += ' ';
            });
        }
        $(".route_{:$route->getKey()}").prop('checked', checked);
    });
</script>
{loop $route->getChildNodes() $route}
    {template './role_route_tpl'}
{/loop}